<template>
	<view class="order-list" :class="themeName">
		<!-- Tabs -->
		<navbar title="客户管理"></navbar>

		<view class="query-line flex row-between">
			<view class="flex" @click="chooseQuery">
				<text>{{$zhTran('客户筛选')}}</text>
				<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
			</view>
			<view class="flex" @click="chooseSort">
				<text>{{sort.desc}}{{$zhTran('排序')}}</text>
				<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
			</view>
		</view>

		<!-- Order Lists -->
		<view class="order-item">
			<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: $zhTran('暂无客户~'),
				  	fixed: true
				  }
			  }" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="order-contain">
					<view class="order" v-for="item,idx in clientList" :key="idx ">
						<!-- Order Header -->
						<view class="order-header flex row-between">
							<view class="flex">
								<image class="avatar" :src="item.user_info.avatar" mode="widthFix" />
								<view class="m-l-30">
									<view class="nr m-r-20 bold">{{$zhTran('当前用户')}}：{{item.user_info.nickname}}</view>
									<view class="xs m-t-10 muted">{{$zhTran('联系电话')}}：{{item.user_info.mobile}}</view>
								</view>
							</view>
						</view>

						<view class="order-main flex row-between">
							<view class="box">
								<view class="num">{{item.order_count}}</view>
								<view class="desc">{{$zhTran('客户订单')}}</view>
							</view>
							<view class="box">
								<view class="num">{{item.order_amount}}</view>
								<view class="desc">{{$zhTran('订单金额')}}</view>
							</view>
							<view class="box">
								<view class="num">{{item.order_profit}}</view>
								<view class="desc">{{$zhTran('订单收益')}}</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

		<u-popup v-model="showVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePopup">
			<view class="query-box" v-if="mode == 'query'">
				<view class="query-header">
					<text>{{$zhTran('客户筛选')}}</text>
					<u-icon name="close" color="#666666" @tap="showVisible = false" />
				</view>

				<view class="query-main">
					<u-form :model="formModel" ref="uForm" :error-type="['message']">
						<u-form-item :label-width="140" :label="$zhTran('客户名称')" prop="user_name">
							<u-input v-model="formModel.user_name" :placeholder="$zhTran('请填写客户名称')" type="text" />
						</u-form-item>
						<u-form-item :label-width="140" :label="$zhTran('手机号码')" prop="user_mobile">
							<u-input v-model="formModel.user_mobile" :placeholder="$zhTran('请填写手机号')" type="text"
								maxlength="11" />
						</u-form-item>
						<u-form-item :label-width="150" :label="$zhTran('归属业务员')" prop="csppl_sale">
							<view class="flex row-between p-l-15" @click="chooseSaleman">
								<view class="sm muted">{{formModel.csppl_saleman}}</view>
								<u-icon name="arrow-right" color="#999999" />
							</view>
						</u-form-item>
					</u-form>
				</view>

				<view class="query-footer flex-1 flex row-around">
					<button hover-class="none" class="btn btn--cancel" size="md"
						@tap="resetPopup">{{$zhTran('重置')}}</button>
					<button hover-class="none" class="btn btn--confirm add" size="md"
						@tap="handelConfim">{{$zhTran('确定')}}</button>
				</view>
			</view>

			<view class="sort-box" v-if="mode == 'sort'">
				<view class="sort-header">{{$zhTran('客户排序')}}</view>
				<view class="sort-main">
					<view :class="sort.value == 'addtime'?'selected sort-sel':' sort-sel'"
						@click="sortList('addtime','加入时间')">{{$zhTran('加入时间')}}</view>
					<view :class="sort.value == 'order_count'?'selected sort-sel':' sort-sel'"
						@click="sortList('order_count','订单数量')">{{$zhTran('订单数量')}}</view>
					<view :class="sort.value == 'order_amount'?'selected sort-sel':' sort-sel'"
						@click="sortList('order_amount','订单金额')">{{$zhTran('订单金额')}}</view>
					<view :class="sort.value == 'order_profit'?'selected sort-sel':' sort-sel'"
						@click="sortList('order_profit','订单收益')">{{$zhTran('订单收益')}}</view>
				</view>
				<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
				<view class="sort-footer">
					<button hover-class="none" class="btn btn--cancel" size="md"
						@tap="showVisible=false">{{$zhTran("取消")}}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>


<script>
	import {
		apiCitySupplierClientList
	} from '@/api/citysupplier'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		name: 'OrderList',
		mixins: [MescrollMixin],

		data() {
			return {
				csppl_id: '',
				clientList: [],
				showVisible: false,
				formModel: {
					user_name: '',
					user_mobile: '',
					csppl_sale: '',
					csppl_saleman: this.$zhTran('全部')
				},
				sort: {
					value: 'addtime',
					desc: this.$zhTran('加入时间'),
				},
				mode: 'query',
			}
		},

		computed: {},

		methods: {
			// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCitySupplierClientList({
					csppl_id: this.csppl_id,
					...this.formModel,
					sort: this.sort.value,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					if (num === 1) this.clientList = []
					this.clientList = [...this.clientList, ...lists]
					this.clientList = this.$zhTran(this.clientList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},

			chooseSaleman() {
				var that = this
				uni.navigateTo({
					url: "/bundle2/pages/citysupplier/choose_saleman",
					success(res) {
						res.eventChannel.emit("receiveData", {
							csppl_id: that.csppl_id,
							csppl_sale: that.formModel.csppl_sale,
							del_sale: '',
							title: that.$zhTran('归属业务员'),
						});
					},
					events: {
						reSetData(nres) {
							console.log(nres)
							let res = that.$zhTran(nres)
							that.formModel.csppl_sale = res.value
							that.formModel.csppl_saleman = res.label
						}
					},
				});
			},
			resetPopup() {
				this.formModel = {
					user_name: '',
					user_mobile: '',
					csppl_sale: '',
					csppl_saleman: this.$zhTran('全部')
				}
			},
			closePopup() {
				this.showVisible = false
				this.$nextTick(() => {
					this.resetPopup()
				})
			},
			chooseQuery() {
				this.mode = 'query'
				this.showVisible = true
			},
			handelConfim() {
				this.refreshOrderData()
				this.closePopup()
			},
			chooseSort() {
				this.mode = 'sort'
				this.showVisible = true
			},
			sortList(row, desc) {
				this.sort.value = row
				this.sort.desc = this.$zhTran(desc)
				this.refreshOrderData()
				this.closePopup()
			}
		},
		onLoad() {
			const options = this.$Route.query
			console.log(options)
			this.csppl_id = options.csppl_id

			this.refreshOrderData()
			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.query-line {
			padding: 20rpx 40rpx;
			margin: 20rpx 20rpx 0 20rpx;
			border-radius: 5px;
			background-color: #FFFFFF;
		}

		.order-item {
			flex: 1;
			min-height: 0;
		}
	}

	.order-contain {
		padding: 0 20rpx;
	}

	.order {
		padding: 0 20rpx;
		margin-top: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;

		&-header {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: $-solid-border;

			.avatar {
				width: 80rpx;
				border-radius: 50%;
			}
		}

		&-main {
			padding: 30rpx;

			.box {
				text-align: center;

				.num {
					color: rgba(64, 115, 250, 1);
					font-size: 40rpx;
					font-weight: bold;
				}

				.desc {
					color: rgba(128, 128, 128, 1);
					font-size: 26rpx;
				}
			}
		}
	}

	.query {

		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: 500;
			font-size: $-font-size-md;
			background-color: #FFFFFF;
		}

		&-main {
			padding: 20rpx;
		}

		&-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: rgba(248, 248, 250, 1);

			.btn {
				flex: 1;

				&--cancel {
					color: rgba(38, 38, 38, 1);
					width: 48%;
				}

				&--confirm {
					background-color: rgba(64, 115, 250, 1);
					width: 48%;
					color: #fff;
				}
			}
		}
	}

	.sort {

		&-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: bold;
			font-size: 32rpx;
			background-color: #FFFFFF;
		}

		&-main {
			padding: 0 30rpx 30rpx 30rpx;

			.sort-sel {
				color: rgba(56, 56, 56, 1);
				background-color: rgba(246, 247, 249, 1);
				font-size: 28rpx;
				padding: 30rpx;
				text-align: center;
				margin-bottom: 15rpx;

				&.selected {
					color: #fff;
					background-color: rgba(64, 115, 250, 1);
				}
			}
		}

		&-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: #fff;

			.btn {
				flex: 1;

				&--cancel {
					color: rgba(38, 38, 38, 1);
				}
			}
		}
	}

	.functions {
		position: relative;
		z-index: 999;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 36rpx constant(safe-area-inset-bottom) 36rpx;
		padding: 0 36rpx env(safe-area-inset-bottom) 36rpx;

		.btn-add {
			position: absolute;
			right: 50rpx;
			bottom: 80rpx;
		}
	}
</style>